<template>
<view class="mask" v-show="isShow">
  <view :class="[isShow1?'show_in':'',isOut?'show_out':'','model']">
		<image class="sq_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/shouquan.jpg" mode="widthFix" />
		<view class="flex_l">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zlll.png" mode=""></image>
			<view class="">个人资料授权</view>
		</view>
		<view class="sq_c">
			为保证更好的服务体验，需授权您的微信头像、昵称、来完善个人中心的基础材料 
		</view>
		<button v-if="isNew" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <image class="avatar" v-if="avatarUrl" :src="avatarUrl"></image>
		  <image class="avatar" v-else src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"></image>
		</button> 
		<input v-if="isNew"  type="nickname"  @blur="changeName" class="weui-input" placeholder="请输入昵称"/>
		<button v-show="!hasInfo" class="sq_btn" type="primary" @click="getUserProfile()" >{{isNew?'提交':'确定授权'}}</button>
		<view class="tg" @click="isShow=false">跳过</view>
		<!-- <view class="btn_1">暂不授权</view> -->
  </view>
</view>
</template>
<script>
export default {
  data(){
    return {
      isShow:false,
      isShow1:false,
      isOut:false,
			nickname:'',
			avatarUrl:'',
			isNew:true
		}
  },
	onLoad(){
	},
  methods:{
		onChooseAvatar(e) {
			this.avatarUrl = e.detail.avatarUrl
			console.log(e)
		},
		changeName(e){
			this.nickname = e.detail.value
		},
    change(type){
      this.$refs.formInline.resetFields()
      this.loginData.mobile=''
      this.loginData.password=''
      this.isShow2=type==1?false:true
      this.isShow1=type==2?false:true
      this.isOut=type==1?false:true
    },
		show(){
			this.isNew = uni.getStorageSync('v')=='new'?true:false
			this.isShow=true
			this.$nextTick(()=>{
				this.isShow1=true
			})
		},
		getUserProfile() {
			if(this.isNew){
				let avatarUrl=''
				if(!this.avatarUrl){
					uni.showToast({
						title:'请选择头像上传',
						icon:'none'
					})
					return
				}
				if(!this.nickname){
					uni.showToast({
						title:'请填写用户昵称',
						icon:'none'
					})
					return
				}
				if(this.avatarUrl&&this.nickname){
					this.hasInfo=true
					this.isShow1=false
					this.isShow=false
					uni.uploadFile({
						url: 'https://bigdataapi.parkic.com/api/UploadFife', //仅为示例，非真实的接口地址
						filePath: this.avatarUrl,
						name: 'file',
						success: (uploadFileRes) => {
							var obj = JSON.parse(uploadFileRes.data);
							avatarUrl = obj.data.url
							this.$emit('getInfo',{nickName:this.nickname,avatarUrl})
						},
						fail:(err)=>{
							uni.showToast({
								title:'上传失败',
								icon:'none'
							})
							this.hasInfo=false
						}
					})
				}else{
					uni.showToast({
						title:'请完善个人信息后提交',
						icon:'none'
					})
				}
			}else{
				uni.getUserProfile({
					provider: "weixin",
					desc:'登录',
					success: res => {
						console.log(res)
						this.hasInfo=true
						const userWeiXinAccInfo = res.userInfo;
						// uni.setStorageSync('userinfo', JSON.stringify(userWeiXinAccInfo))
						this.isShow1=false
						this.isShow=false
						this.$emit('getInfo',userWeiXinAccInfo)
					},
					fail: err => {
						console.log("获取用户信息失败");
						this.hasInfo=false
						console.log(err);
					}
				})
			}
		}
  }
}
</script>
<style lang="scss" scoped>
	.tg{
		width: 100%;
		text-align: center;
		color: #888;
		font-size: 14px;
		}
.mask { backdrop-filter: blur(6px);position: fixed; z-index: 2000; height: 100%; width: 100%; top: 0;left: 0; text-align: center;}
.mask::before { content: ""; position: absolute; background: rgba(0,0,0,.6); filter: blur(5px); height: 100%; width: 100%; top: 0; left: 0;}
.mask{
  &::v-deep .ivu-form-inline .ivu-form-item{
    margin-right: 0;
    width: 240px;
  }
}
.sq_img{
	width: 100%;
}
.sq_c{
	color: #ccc;
	width: 90%;
	margin-left: 5%;
	margin-top:20px;
	text-align: center;
	font-size: 14px;
}
.flex_l{
	position: absolute;
	top: 50px;
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 24px;
	color: #fff;
	image{
		width: 32px;
		height: 32px;
		margin-top: 1px;
		margin-right: 10px;
	}
}
.model{
  position: absolute;;
  width: 80%;
  // height: 310px;
  // height: 270px;
	padding-bottom: 10px;
  left: 10%;
  top: calc(20%);
  background: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 99999 !important;
	border-radius: 8px;
	overflow: hidden;
}
.sq_btn{
	width:80%;
	position: relative;
	left: 10%;
	margin: 14px 0 4px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background-color: #f93;
	color: #fff;
	font-size: 16px;
}
.btn_1{
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
	color: #044183;
}
.show_in{
    animation: go_in 0.5s;
    // animation-fill-mode: forwards;
    opacity: 1;
    visibility: visible;
    z-index: 10001;
}
 @keyframes go_in
  {
     0% {opacity: 0; transform: scale(0.5);}
     100%{opacity: 1; transform: scale(1);}

  }
  .show_out{
    animation: go_out 0.3s;
    // animation-fill-mode: forwards;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
@keyframes go_out
  {
     0% {opacity: 1; transform: scale(1);visibility: visible;}
     100%{opacity: 0; transform: scale(0.8);}

  }
.avatar-wrapper{
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50%;
	border:none !important;
	padding: 0 !important;
	margin: 10px auto;
	overflow: hidden;
	.avatar{
		height: 50px;
		width: 50px;
		border-radius: 25px;
		
	}
}
</style>